<template>
  <div class="find">
    <hm-nav-bar :showLeft="false" title="发现"></hm-nav-bar>
    <van-pull-refresh v-model="loading" @refresh="refresh">
      <div class="content">
        <find-cell title="面经技巧"></find-cell>
        <echnic
          v-for="(item, index) in technicData"
          :key="index"
          :info="item"
        ></echnic>
        <find-cell title="市场数据"></find-cell>
        <van-tag color="#eceaea" text-color="#6b6c83" class="tag1">{{
          chartData.city
        }}</van-tag>
        <van-tag color="#eceaea" text-color="#6b6c83" class="tag2">{{
          chartData.position
        }}</van-tag>
        <div class="chart-area" ref="chart">
          <!-- 这里需要再用一个div包过ul不然会报错 原因是上面的key也用了index 同层级key使用相同属性
        报错 这是内部本身存在的问题 避免这个问题可以在外面加一层div让他们层级不一样就行 -->
          <!-- <ul
          class="char"
          v-for="(item, index) in chartData.yearSalary"
          :key="index"
          v-show="index < 3 || showAll"
        > -->
          <ul
            class="char"
            v-for="(item, index) in chartData.yearSalary"
            :key="index"
          >
            <li class="c1">{{ item.year.slice(0, 5) }}</li>
            <li class="c2">
              <div class="line" :style="{ width: item.per }">
                {{ item.salary }}
              </div>
            </li>
            <li class="c3">
              <i
                class="up iconfont"
                v-if="item.percent !== undefined && item.percent >= 0"
                >&#xe651;</i
              >
              <i
                class="down iconfont"
                v-else-if="item.percent !== undefined && item.percent < 0"
                >&#xe64e;</i
              >
            </li>
            <li class="c4">
              <!-- 没有 percent 的话 item.percent就是undefined 之所以这个不能写在li上面是因为
            不满足条件不渲染li导致右边没宽度 那么中间图条就会往右边扩展 我们中间宽度是要固定的
            因此我们写在里面span里 无论满不满足 li都有 都在占宽度 渲染的是span -->
              <!-- 处理右边百分比 -->
              <span v-if="item.percent !== undefined">{{ item.percent }}%</span>
            </li>
          </ul>
        </div>
        <div class="look-more" @click="showClick">
          <!-- <div class="look-more" @click="showAll = !showAll"> -->
          <div v-if="!showAll">
            <span class="s">展开更多</span><i class="iconfont ii">&#xe652;</i>
          </div>
          <div v-else>
            <span class="s">收起</span><i class="iconfont r180">&#xe652;</i>
          </div>
        </div>
        <find-cell title="面经分享" @click.native="goShare"></find-cell>
        <div>
          <share
            v-for="(item, index) in shareList"
            :key="index"
            :info="item"
          ></share>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
// 导入
import findCell from './findCell'
import echnic from './technical'
import { technic, chartData, articleShare } from '../../../api/find'
import share from './share'

export default {
  name: 'find',
  components: {
    findCell,
    echnic,
    share
  },

  data () {
    return {
      technicData: [],
      chartData: '',
      showAll: false,
      shareList: [],
      loading: false
    }
  },
  created () {
    this.refresh()
  },
  methods: {
    showClick () {
      this.showAll = !this.showAll
      if (this.showAll) {
        this.$refs.chart.style.height = this.$refs.chart.scrollHeight + 'px'
      } else {
        this.$refs.chart.style.height =
          (this.$refs.chart.scrollHeight / this.chartData.yearSalary.length) *
            3 +
          'px'
      }
    },
    async refresh () {
      window.console.log('--------------')
      console.log(this.$refs.chart) // undfined created阶段dom还没渲染 因此获取不到
      window.console.log('--------------')
      const res = await technic()
      // console.log(res)
      this.technicData = res.data.data.list
      const res2 = await chartData()
      // window.console.log(res2)
      // 翻转数组 能改变原数组
      res2.data.data.yearSalary.reverse()
      this.chartData = res2.data.data
      // 只能放在$nextTick 里面  放在created里面不行 dom还没渲染  放在munted里面不行 因为mounted只能这里面执行渲染初始数据  请求是异步 这些数据初始化没渲染 ul中v-for没数据 就ul没渲染 没高度

      // 记住基本上移动端 类似这种 高度控制的都是通过这种方式
      this.$nextTick(() => {
        this.$refs.chart.style.height =
          (this.$refs.chart.scrollHeight / res2.data.data.yearSalary.length) *
            3 +
          'px'
      })
      res2.data.data.yearSalary.forEach(item => {
        item.per = (+item.salary / res2.data.data.topSalary) * 100 + '%'
      })
      const res3 = await articleShare()
      // window.console.log(res3)
      this.shareList = res3.data.data.list
      this.loading = false
    },
    goShare () {
      this.$router.push('/home/shareList')
    }
  },
  activated () {
    window.scrollTo(0, this.$route.meta.xxx)
    console.log('----------------------czq------------')
    // window.console.log(this.$route.meta)
  }
}
</script>
<style lang="less" scoped>
.find {
  .content {
    padding: 0 @p15;
    .tag1 .tag2 {
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      color: #545671;
      line-height: 20px;
      letter-spacing: 0px;
    }
    .chart-area {
      // 高度变化 产生动画 我们可以看到无论收起展开 高度都不会发生变化 因此我们需要设置显示三条的高度
      // 和显示全部时的高度 那样就会有变化啦
      // 高度做动画
      transition: height 0.6s;

      overflow: hidden;
      .char {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        .c1 {
          width: 50px;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #545671;
          letter-spacing: 0px;
        }
        .c2 {
          flex: 1;
          background-color: #ebdfdf;
          border-radius: 4px;

          .line {
            background-color: #fe6d67;
            border-radius: 4px;
            color: #fff;
            font-size: 12px;
            text-align: right;
            padding-right: 10px;
          }
        }
        .c3 {
          width: 20px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          .up {
            font-size: 14px;
            color: #fe6d67;
          }
          .down {
            color: #00d47a;
            font-size: 14px;
          }
        }
        .c4 {
          width: 30px;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: right;
          color: #5b5d75;
          line-height: 20px;
          letter-spacing: 0px;
        }
      }
    }
    .look-more {
      text-align: center;
      .r180 {
        display: inline-block;
        transform: rotate(180deg);
        color: #b4b4bd;
      }
      .s {
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #545671;
        line-height: 20px;
        letter-spacing: 0px;
      }

      .ii {
        color: #b4b4bd;
      }
    }
  }
}
</style>
